<template>
  <view class="wrap">
    <u-form class="login-form" :model="model" :rules="rules" ref="uForm">
      <u-form-item label-width="200" label="状态">
        <u-input :border="border" disabled v-model="model.state" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="200" label="支付日期">
        <u-input :border="border" disabled v-model="model.pay_date" type="text"></u-input>
      </u-form-item>
    </u-form>
    <u-button class="custom-btn pay-btn" type="primary" @click="submit" v-if="model.state=='待确认'">支付</u-button>
    <u-gap height="70"></u-gap>
    <u-button class="custom-btn" type="primary" @click="detail" >刷新</u-button>
    <u-gap height="70"></u-gap>

    <u-popup v-model="popupVisible" :mask="true" mode="center" :mask-close-able="false">
      <view class="popup-content">
        <view>
          <canvas class="code-item" canvas-id="qrcode" style="height: 500rpx;width: 500rpx;"/>
        </view>
        <u-button class="custom-btn" @click="hidePopup" type="primary">关闭</u-button>
      </view>
    </u-popup>

  </view>
</template>

<script>
import wxcode from 'uniapp-qrcode'

export default {
  data() {
    return {
      popupVisible: false,
      model: {
        state: '待确认'
      },
      rules: {},
      border: true,
      check: false,
      selectStatus: 'close',
    };
  },
  onLoad() {

  },
  created() {
    this.detail()
  },
  computed: {},
  onReady() {
  },
  methods: {
    detail() {
      this.$u.get('/paylog/detail', {
        student_id: this.vuex_user.id
      }).then(res => {
        console.log(res)
        if (res != null) {
          this.model = res
        }
      })
    },
    submit() {
      this.$u.get('/paylog/pay', {
        student_id: this.vuex_user.id
      }).then(res => {
        if (res.payUrl) {
          this.popupVisible = true;
          setTimeout(() => {
            wxcode.qrcode('qrcode', res.payUrl, 500, 500);
          }, 500)
        }
      })
    },
    hidePopup() {
      this.popupVisible = false;
    },

  }
};
</script>

<style scoped lang="scss">
.wrap {
  padding: 30 rpx;
}

.agreement {
  display: flex;
  align-items: center;
  margin: 40 rpx 0;

  .agreement-text {
    padding-left: 8 rpx;
    color: $u-tips-color;
  }
}
.pay-btn{
	margin-top: 40rpx;
}
</style>
